<template>
    <div class="record">
        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
        <div class="record-con">
            <div class="info">
                <div class="info-img">
                    <img src="../../assets/images/icon_contract.png" alt="" />
                </div>
                <div class="info-type">{{ $t('new.desc107') }}</div>
                <div class="info-icon">{{ info.coinPair }}</div>
                <div class="info-status" v-if="info.status==1"><span v-if="info.profitStatus==0">{{$t('new.desc96')}}</span> <span class="color1" v-else>{{$t('new.desc97')}}</span></div>
                <div class="info-status color3" v-else>{{$t('new.desc90')}}<van-count-down :time="info.laveSeconds * 1000"
                                            @finish="handlerFinsh($event)" /></div>
                <div class="list">
                    <div class="list-info">
                        <div>{{$t('new.desc117')}}</div>
                        <p><span class="color2" v-if="info.type==0">{{$t('new.desc62')}}</span><span class="color1" v-else>{{$t('new.desc63')}}</span></p>
                    </div>
                    <div class="list-info">
                        <div>{{$t('new.desc108')}}</div>
                        <p>{{info.sn}}</p>
                    </div>
                    <div class="list-info">
                        <div>{{$t('new.desc109')}}</div>
                        <p>{{info.coinPair}}</p>
                    </div>
                    <div class="list-info">
                        <div>{{$t('new.desc110')}}</div>
                        <p>{{info.amount}}</p>
                    </div>
                    <div class="list-info">
                        <div>{{$t('new.desc111')}}</div>
                        <p>{{info.buyPrice}}</p>
                    </div>
                    <div class="list-info" v-if="info.status==1">
                        <div>{{$t('new.desc112')}}</div>
                        <p>{{info.openingPrice}}</p>
                    </div>
                    <div class="list-info" v-else>
                        <div>{{$t('new.desc113')}}</div>
                        <p>{{info.currenPrice}}</p>
                    </div>
                    <div class="list-info">
                        <div>{{$t('new.desc114')}}</div>
                        <p v-if="info.status==1"> <span class="color2" v-if="info.profitStatus==0">{{$t('new.desc96')}}</span> <span class="color1" v-else>{{$t('new.desc97')}}</span></p>
                        <p v-else>{{$t('new.desc103')}}</p>
                    </div>
                    <div class="list-info">
                        <div>{{$t('new.desc115')}}</div>
                        <p>{{info.createTime}}</p>
                    </div>
                    <div class="list-info">
                        <div>{{$t('new.desc116')}}</div>
                        <p v-if="info.status==1">{{info.settleDate}}</p>
                        <p v-else>--</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            titleSize: this.$t('new.desc106'),
            is_mt: true,
            info: {}
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        handlerFinsh(e) {
            this.getInfo()
        },
        getInfo() {
            this.$post(this.URL.user.orderinfo, {
                sn: this.$route.query.sn
            }).then(res => {
                if (res.code == 0) {
                    this.info = res.data;
                    this.info.coinPair=this.info.coinPair.replace('/USDT','')
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.record {

    .record-con {
        padding: 1.08rem 0.2rem 0;
        .color1{
            color: #5EBA89 !important;
        }
        .color2{
            color: #FF5557 !important;
        }
        .color3{
            color: #666666 !important;
            /deep/ .van-count-down{
                color: #666;
            }
        }
        .info {
            background: #fff;
            border-radius: 0.16rem;
            box-shadow: -0.1rem 0rem 0.14rem 0.1rem rgba(0, 0, 0, 0.03);

            .info-img {
                padding: .7rem 0 0;
                text-align: center;

                img {
                    width: 2.04rem;
                    height: 1.57rem;
                }
            }
            .info-type{
                font-size: .38rem;
                color: #14191F;
                text-align: center;
            }
            .info-icon{
                padding: .18rem 0 .16rem;
                font-size: .3rem;
                color: #999999;
                text-align: center;
            }
            .info-status{
                padding:0 0 .53rem;
                text-align: center;
                font-size: .4rem;
                color: #FF5557;
            }
            .list{
                padding: .34rem .3rem;
                border-top: .02rem solid #F3F4F8;
                .list-info{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: .26rem;
                    font-size: .28rem;
                    div{

                        color: #666666;
                    }
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
</style>
